<!doctype html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="../Carousel/css/style.css">
</head>

<body>
	<section class="jq22-container">
		<div class="container">
			<div id="single-quad" class="carousel slide" data-ride="carousel" data-shift="1">
				<div class="carousel-inner">
					<ul class="row item active">
						<li class="col-xs-1 one oneleftimg">
							<img src="../Carousel/carouselImage/111.png" class="img-responsive">
							<div class="whiteaction">
								<div class="fontposition">2020年平均降水量产品</div>
							</div>
						</li>
						<li class="col-xs-1 two leftimg">
							<img src="../Carousel/carouselImage/333.png" class="img-responsive">
							<div class="whiteaction">
								<div class="fontposition">2014全国归一化植被指数年均值</div>
							</div>
						</li>
						<li class="col-xs-1 three leftimg">
							<img src="../Carousel/carouselImage/444.png" class="img-responsive">
							<div class="whiteaction">
								<div class="fontposition">2015年全国叶面积指数年均值</div>
							</div>
						</li>
						<li class="col-xs-1 four leftimg">
							<img src="../Carousel/carouselImage/555.png" class="img-responsive">
							<div class="whiteaction">
								<div class="fontposition">2015年全国叶面积指数年均值</div>
							</div>
						</li>
						<li class="col-xs-1 five leftimg">
							<img src="../Carousel/carouselImage/666.png" class="img-responsive">
							<div class="whiteaction">
								<div class="fontposition">2000年全国土地利用分布图</div>
							</div>
						</li>
						<li class="col-xs-1 one leftimg">
							<img src="../Carousel/carouselImage/111.png" class="img-responsive">
							<div class="whiteaction">
								<div class="fontposition">2020年平均降水量产品</div>
							</div>
						</li>
						<li class="col-xs-1 one leftimg">
							<img src="../Carousel/carouselImage/111.png" class="img-responsive">
							<div class="whiteaction">
								<div class="fontposition">2020年平均降水量产品</div>
							</div>
						</li>
					</ul>
					<ul class="row item">
						<li class="col-xs-1 one oneleftimg">
							<img src="../Carousel/carouselImage/111.png" class="img-responsive">
							<div class="whiteaction">
								<div class="fontposition">2020年平均降水量产品</div>
							</div>
						</li>
						<li class="col-xs-1 two leftimg">
							<img src="../Carousel/carouselImage/333.png" class="img-responsive">
							<div class="whiteaction">
								<div class="fontposition">2014全国归一化植被指数年均值</div>
							</div>
						</li>
						<li class="col-xs-1 three leftimg">
							<img src="../Carousel/carouselImage/444.png" class="img-responsive">
							<div class="whiteaction">
								<div class="fontposition">2015年全国叶面积指数年均值</div>
							</div>
						</li>
						<li class="col-xs-1 four leftimg">
							<img src="../Carousel/carouselImage/555.png" class="img-responsive">
							<div class="whiteaction">
								<div class="fontposition">2015年全国叶面积指数年均值</div>
							</div>
						</li>
						<li class="col-xs-1 five leftimg">
							<img src="../Carousel/carouselImage/666.png" class="img-responsive">
							<div class="whiteaction">
								<div class="fontposition">2000年全国土地利用分布图</div>
							</div>
						</li>
						<li class="col-xs-1 one leftimg">
							<img src="../Carousel/carouselImage/111.png" class="img-responsive">
							<div class="whiteaction">
								<div class="fontposition">2020年平均降水量产品</div>
							</div>
						</li>
						<li class="col-xs-1 one leftimg">
							<img src="../Carousel/carouselImage/111.png" class="img-responsive">
							<div class="whiteaction">
								<div class="fontposition">2020年平均降水量产品</div>
							</div>
						</li>
					</ul>
				</div>
				<a class="carousel-control left" href="#single-quad" data-slide="prev">Previous</a>
				<a class="carousel-control right" href="#single-quad" data-slide="next">Next</a>
			</div>
		</div>
	</section>
	<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://libs.baidu.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script src="/public/Carousel/js/index.js"></script>
	<style scoped>
		.img-responsive {
			height: 106px;
			width: 172px;
		}

		.leftimg {
			margin-left: 25px;
		}

		.oneleftimg {
			margin-left: 20px;
		}

		.col-xs-1 {
			width: 172px;
		}

		.whiteaction {
			position: absolute;
			height: 35px;
			font-size: 10px;
			margin-top: -33px;
			width: 166px;
			margin-left: 4px;
			background-color: rgba(0, 0, 0, 0.5);
			text-shadow: 1px 1px 1px #000;
		}

		.fontposition {
			height: 100%;
			margin-left: 9px;
			font-size: 10px;
			color: #fff;
		}

		.col-xs-1 {
			padding-right: 0px;
			padding-left: 0px;
		}

		.carousel-inner {
			position: relative;
			width: 100%;
			overflow: hidden;
			height: 105px;
		}

		/* 媒体查询 */
/* 
		@media screen and (min-width: 1600px) and (max-width:1919px){
			.carousel {
				position: absolute;
				margin: 0 30px;
				height: 120px;
				width: calc(100% - 70px);
				margin-left: -260px;
				margin-top: -20px;
			}

		}

		@media screen and  (min-width: 1366px) and (max-width:1599px) {
			.carousel {
				position: absolute;
				margin: 0 30px;
				height: 120px;
				width: calc(100% - 65px);
				margin-left: -145px;
				margin-top: -20px;
			}

		} */
	</style>
</body>

</html>